@(applicationSettings: model.ApplicationSettings)(templates: Seq[String], filesFormats: Seq[String])

@import play.api.i18n.Messages

@main(applicationSettings) {
<style type="text/css">
#s3index-root a {
	pointer-events: none;
	cursor: default;
}
</style>
} {
@content{
		@Html(Messages("left.column.text"))
  } {
		<div class="wizard">
			<a href="#" id="propertiesPageLink"><span class="badge">1</span> @Messages("wizard.general.properties.page.link.name")</a>
			<a href="#" class="current"><span class="badge badge-inverse">2</span> @Messages("wizard.view.properties.page.link.name")</a>
			<a href="#" id="finalPageLink"><span class="badge">3</span> @Messages("wizard.final.page.link.name")</a>
		</div>
  } {
		<form id="form">
			<fieldset>
				<legend>Template Properties</legend>
				
				<label>Select template from drop-down list</label>
				<div class="controls control-group">
					<select name='template' class="span4">
					</select> 
				</div>
				
				<label>Select file list format</label>
				<div class="controls control-group">
					<select name='filesformat' class="span4">
					</select>
				</div>
				
				<label>Maximum keys per page</label>
        <div class="controls control-group">
          <input type="number" name='maxKeys' class="span4 form-error">
        </div>
				
				<p/>
        <div id="resizable" class="thumbnail controls controls-row ui-resizable" style="width: 100%; height: 100%;">
				  <div id="s3index-root" style="margin: 10px"></div>
				</div>
				
		    <hr/>
		    
				<a class="btn btn-large" href="#" id="back"><i class="icon-chevron-left"></i> Back</a>
				<button id="done" type="submit" class="btn btn-large btn-primary">Done <i class="icon-ok icon-white"></i></button>
			</fieldset>
		</form>
  }
} {
  <script type="text/javascript">
      $(document).ready(function() {
        registerSpinner();
        registerClonable();
        getProperties('@routes.Application.properties')
        $('#back').click(function() {postProperties('@routes.Application.properties', function() {window.location.href = '@routes.Application.generalPropertiesPage'})})
        $('#done').click(function() {postProperties('@routes.Application.properties', function() {window.location.href = '@routes.Application.finalPage'})})
        $('#propertiesPageLink').click(function() {postProperties('@routes.Application.properties', function() {window.location.href = '@routes.Application.generalPropertiesPage'})})
        $('#finalPageLink').click(function() {postProperties('@routes.Application.properties', function() {window.location.href = '@routes.Application.finalPage'})})
        $("#resizable").resizable({ animate: false, ghost: true });
        $("#done", document.forms[0]).focus();
      });

      function applyProperties(properties) {
        @for(template <- templates){
          $('select[name="template"]').append('<option>@template</option>')
        }
        $('select[name="template"]').change(function() {
          var template = $(this).val();
          var filesformat = $('select[name="filesformat"]').val()
          loadData('/preview?template=' + template + '&filesformat=' + filesformat, function(content){$("#s3index-root").html(content)})
        });
        @for(ft <- filesFormats) {
          $('select[name="filesformat"]').append('<option>@ft</option>')
        }
        $('select[name="filesformat"]').change(function() {
          var filesformat = $(this).val();
          var template = $('select[name="template"]').val()
          loadData('/preview?template=' + template + '&filesformat=' + filesformat, function(content){$("#s3index-root").html(content)})
        });
        $('select[name="template"]').val(properties.template)
        $('input[name="maxKeys"]').val(properties.maxKeys)
        $('select[name="template"]').trigger('change');
        $('select[name="filesformat"]').val(properties.fileListFormat)
        $('select[name="filesformat"]').trigger('change');
      }
      
    </script>
}
